<template>
  <el-container>
    <pt-aside :title="hideTitle=='0'?'':'标题'" style="border:1px solid #000" width="40%">
      aside页面<br/>
      布局在右侧可拖动
      <el-checkbox false-label="0" true-label="1" v-model="hideTitle">{{hideTitle=='0'?'隐藏标题':'显示标题'}}</el-checkbox>
    </pt-aside>
    <pt-container>
      <pt-header :title="hideTitle=='0'?'':'标题'" height="40%" style="border:1px solid #000">header页面
        <pt-btn icon="fa fa-question-circle-o" style="font-size: 130px">
          <div slot="content">
            <li>title设置</li>
            <li>拖动</li>
            <li>一键收缩和展开</li>
            <li>tab页务必使用懒加载,lazy</li>
          </div>
        </pt-btn>
      </pt-header>
      <pt-main style="border:1px solid #000">
        <el-tabs v-model="activeName">
          <el-tab-pane label="tab说明" name="first">企业应用tab页,多为列表,不用懒加载,会加载全部列表,性能极低</el-tab-pane>
          <el-tab-pane label="列表demo" lazy name="second">
            <PtDemoTable></PtDemoTable>
          </el-tab-pane>
          <el-tab-pane label="数据权限" lazy name="third">
            数据权限,在组织和账号管理已经实现,查询自己管理的部门及下级的数据
            <li>库表需要有ORG_ID</li>
            <li>写jpql时,后端需要用到 AuthUtil.addJpql</li>
            <li>默认为本部门,可在
              <pt-button @click="$router.push('/auth/role')">角色管理</pt-button>
              里,授权角色针对某个菜单的特殊管理部门
            </li>
          </el-tab-pane>
          <el-tab-pane label="test3" lazy name="fourth">ssssssssssss</el-tab-pane>
        </el-tabs>
      </pt-main>

    </pt-container>
  </el-container>
</template>
<script>
  import PtDemoTable from './PtDemoTable'

  export default {
    name: 'layoutdemo',
    components: {PtDemoTable},
    data() {
      return {
        hideTitle: '0',
        activeName: 'first'
      }
    },

    mounted() {

    },
    methods: {},
    computed: {}
  }
</script>
